Skip to main content

jplayer 做的一个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />

    <!– Website Design By: www.happyworm.com –>
    <title>Demo : jPlayer as a text based audio player</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

// Local copy of jQuery selectors, for performance.
var    my_jPlayer = $("#jquery_jplayer"),
my_trackName = $("#jp_container .track-name"),
my_playState = $("#jp_container .play-state"),
my_extraPlayInfo = $("#jp_container .extra-play-info");

// Some options
var    opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
opt_auto_play = true, // If true, when a track is selected, it will auto-play.
opt_text_playing = "Now playing", // Text when playing
opt_text_selected = "Track selected"; // Text when not playing

// A flag to capture the first track
var first_track = true;

// Change the time format
$.jPlayer.timeFormat.padMin = false;
$.jPlayer.timeFormat.padSec = false;
$.jPlayer.timeFormat.sepMin = " min ";
$.jPlayer.timeFormat.sepSec = " sec";

// Initialize the play state text
my_playState.text(opt_text_selected);

// Instance jPlayer
my_jPlayer.jPlayer({
    ready: function () {
        $("#jp_container .track-default").click();
    },
    timeupdate: function(event) {
        my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
        //    $("#barid").width(parseInt(event.jPlayer.status.currentPercentRelative, 10) + "%");
        //    $("#volume").width(parseInt(event.jPlayer.status.volume, 10) + "%");
    },
    play: function(event) {
        my_playState.text(opt_text_playing);
    },
    pause: function(event) {
        my_playState.text(opt_text_selected);
    },
    ended: function(event) {
        my_playState.text(opt_text_selected);
    },
    swfPath: "js",
    cssSelectorAncestor: "#jp_container",
    supplied: "mp3",
    wmode: "window"
});

        // Create click handlers for the different tracks
        $("#jp_container .track").click(function(e) {
            my_trackName.text($(this).text());
            my_jPlayer.jPlayer("setMedia", {
                mp3: $(this).attr("href")
            });
            if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
                my_jPlayer.jPlayer("play");
            }
            first_track = false;
            $(this).blur();

            return false;
        });

            //    function abc()
            //    {
                //        var bbb = $("#barid").text();
//        $("#barid").width(bbb);
//        setTimeout(abc,1000);
//    }
//    setTimeout(abc,1000);

});
//]]>

</script>

<style>
<!–

.demo-container {
    border: 1px solid #009BE3;
    padding:0 20px;
    font-family: "Myriad Pro Regular","Trebuchet MS";
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
    color: #009BE3;
}

.demo-container ul {
    list-style-type:none;
    padding:0;
    margin:1em 0;
    width:100%;
    overflow:hidden;
}

.demo-container ul span {
    color: #A0A600;
}

.demo-container li {
    float:left;
    margin-right:1em;
}

.demo-container p span.track-name {
    color: #CC0090;
}

–>
</style>

</head>
<body>

    <div id="jquery_jplayer"></div>

    <!– Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features –>

    <div id="jp_container">
        <ul>
            <li><span>Select a track : </span></li>
            <li><a href="a.mp3">Cro Magnon Man</a></li>
            <li> | </li>
            <li><a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3">The Separation</a></li>
            <li> | </li>
            <li><a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">Lismore</a></li>
            <li> | </li>
            <li><a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3">Thin Ice</a></li>
        </ul>
        <p>
            <span></span> :
            <span>nothing</span>
            at <span></span>
            of <span></span>, which is
            <span></span>
        </p>
        <ul>
            <!–播放 暂停 停止–>
            <li><a href="#"><span><i></i></span></a></li>
            <li><a href="#"><span><i></i></span></a></li>
            <li><a href="#"><span><i></i></span></a></li>
        </ul>
        <ul>
            <li>volume :</li>
            <li><a href="#">Mute</a></li>
            <li><a href="#">Unmute</a></li>
            <li><a href="#">
                <!–音量控制–>
                <div style="width:100px;">
                    <div style="width: 80%;" id="volume" ></div>
                </div></a>
            </li>
            <li><a href="#">Max</a></li>
        </ul>
        <div style="width:200px;">
            <div  style="width: 70%;"></div>
        </div>

    </div>

    <a id="abc">单击我</a>

</body>

</html>